<template>
    <div class="home">
        <div class="card card-big">
            <news-card></news-card>
        </div>
        <div class="card">
            <movie-card></movie-card>
        </div>
        <div class="card">
            <top-list></top-list>
        </div>
        <div class="card">
            <ancient-poetry-card></ancient-poetry-card>
        </div>
        <div class="card">
            <essay-card></essay-card>
        </div>

        <!--    <div class="card"></div>-->
        <!--    <div class="card"></div>-->
    </div>
</template>

<script setup lang="ts">
    import MovieCard from "@/view/movie/MovieCard.vue";
    import EssayCard from "@/view/essay/EssayCard.vue";
    import TopList from "@/view/topList/TopList.vue";
    import AncientPoetryCard from "@/view/ancientPoetry/AncientPoetryCard.vue";
    import NewsCard from "@/view/news/NewsCard.vue";
</script>

<style scoped>
    .home {
        margin: 0 auto;
        max-width: 980px;
        width: 100%;
        padding: 60px 20px;
        display: flex;
        justify-content: space-evenly;
        flex-flow: row wrap;
    }

    .card {
        width: 300px;
        height: 140px;
        margin: 30px;
        /*border: white solid 1px;*/
        /* border-radius: 16px; */
        /*background-color: red;*/
    }

    .card-big {
        height: 18.67rem;
    }
</style>
